<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios应用</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="app">
    <div align="center">
        <h3>用户设备</h3>
        姓名: <input type="text" v-model="addEquipment.name"/>
        年龄: <input type="text" v-model="addEquipment.model"/>
        性别: <input type="text" v-model="addEquipment.status"/>
        <!-- 点击调用入库函数 -->
        <button @click="addUserBtn">新增</button>
    </div>



    <table>
        <tr v-for="e in equipmentList">
            <td v-text="e.id"></td>
            <td v-text="e.name"></td>
            <td v-text="e.model"></td>
            <td v-text="e.status"></td>

        </tr>
    </table>

</div>
<script>


   var app= new Vue({
        el:"#app",
        data:{
            //定义用户数据
            equipmentList:[],
            addEquipment:{
                name:"",
                model:"",
                status:""
            }
        },
        created(){
            //初始化加载数据
            //get(url,数据)
           axios.get("http://localhost:8081/findAll").then(res=>{
               //响应数据
               console.log(res.data);
               app.equipmentList=res.data;
           })
           /* axios.get("data.json").then(res=>{
               //将数据赋值到vue实例中的数据属性  equipment
                //不能用this,在axios回调函数中表示窗口，不是vue实例
                app.equipment=res.data;
            })*/
            /*axios.get("http://localhost:8081/findById/3").then(res=>{
                //响应
                console.log(res);
                console.log(res.data);
                this.equipment=res.data;
            }).catch(aa=>alert(aa));*/
        }
    })
</script>
</body>
</html>